<script setup>
import Form from '@/components/common/form.vue'
import Table from '@/components/common/table.vue'
import TitleHeader from '@/components/common/titleHeader.vue'
import { ref } from 'vue'
// 表单数据
const formData = ref({
  name: '',
  status: ''
})
const formModel = [
  {
    prop: 'name',
    label: '角色名称',
    type: 'input'
  },
  {
    prop: 'status',
    label: '状态',
    type: 'select',
    options: [
      { label: '启用', value: 1 },
      { label: '禁用', value: 0 }
    ]
  },
  {
    name: '查询',
    type: 'button',
    btnType: '',
    prop: 'query'
  },
  {
    name: '新增',
    type: 'button',
    btnType: 'info',
    prop: 'add'
  }
]
// 表单点击事件
function handleForm(type, data) {
  console.log(type, data)
}
// 列表数据
const tableData = [
  {
    name: '管理员',
    time: '2024-05-01 15:00:00', 
    status: '启用',
    description:'查看所有楼宇水电数据'
  }
]
const columns = [
  {
    prop: 'name',
    label: '角色名称'
  },
  {
    prop: 'time',
    label: '创建时间'
  },

  {
    prop: 'status',
    label: '状态'
  },
  {
    prop: 'description',
    label: '角色描述'
  }
]
const options = [
  {
    label: '编辑',
    type: 'primary',
    prop: 'edit'
  },
  {
    label: '删除',
    type: 'info',
    prop: 'delete'
  }
]

//表格的操作点击事件
function handleTable(detail, type) {
  console.log(detail, type)
}
</script>

<template>
  <div class="role-wrapper">
    <TitleHeader></TitleHeader>
    <div class="role-content">
      <Form :data="formData" :formOpt="formModel" @handleForm="handleForm"></Form>
      <Table
        :tableData="tableData"
        :columns="columns"
        :options="options"
        @handleTable="handleTable"
      >
        <template #firstColumn>
          <el-table-column type="index" label="序号" width="100" />
        </template>
      </Table>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.role-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
  .role-content {
    // width: calc(100% - 100px);
    padding: 30px 50px;
    text-align: left;
  
  }
}
</style>
